<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定手机</title>
    <link rel="stylesheet" href="/index/css/common.css?v=2">
    <link rel="stylesheet" href="/index/css/bind_phone.css?v=3">

</head>
<body>z
<div class="tabsBox">
    <div class="topTab">
        <div class="tabLeft">
            <img src="/index/assets/left.png">
        </div>
        <div class="tabCenters">绑定手机</div>
        <!-- <div class="tabRight">收益说明</div> -->
    </div>
</div>
<div class="login">
    <div class="l_title">亲,请绑定手机号码,以免账号丢失</div>
    <div class="writePhone">
        <span>+86</span>
        <input type="number" id="phone" placeholder="请输入手机号码">
    </div>
    <div class="writePhone">
        <input type="number" id="code" placeholder="请输入验证码">
        <button class="getCode">获取验证码</button>
    </div>
    <div class="loginBtn">确定</div>
</div>
</body>
<script type="text/javascript" src="/index/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/index/js/common.js"></script>

{include file='common/toast'}

<script type="text/javascript">

    $(function () {
        //绑定手机
        $('.loginBtn').click(function () {

            var phone = $('#phone').val();
            var code = $('#code').val();

            if (!checkPhone(phone)) {
                toastFail("请输入正确的手机号");
                return;
            }

            if (!code) {
                toastFail("请输入验证码");
                return;
            }

            $.post('{:url("bindPhone")}', {phone: phone, code: code}, function (res) {

                if (res.code == 1) {

                    var reg = "{:input('url')}";

                    if (reg ) {

                        toastSuccess('绑定成功', reg)

                    } else {
                        toastSuccess('绑定成功', '{:url("mine/index")}')

                    }

                } else {
                    toastFail(res.msg);
                }
            }, 'json')
        })


        var val = true

        //获取验证码
        $('.getCode').click(function () {


            if (val) {

                var phone = $('#phone').val();

                if (!checkPhone(phone)) {
                    toastFail('请输入正确的手机号码');

                    return;
                }

                val = false
                $('.getCode').attr('disabled', 'true');


                $('.getCode').text('发送中...')

                $.post('{:url("phoneCode")}', {phone: phone}, function (res) {

                    if (res.code == 1) {
                        let count = 60;
                        let countDown = setInterval(()=> {

                        if(count === 0){
                            $('.getCode').text('重新发送').removeAttr('disabled');
                            clearInterval(countDown)
                            val = true
                          }else{

                                $('.getCode').text(count + 's重新获取')
                            }
                        count--
                    },1000)

                    } else {
                        toastFail(res.msg);
                        $('.getCode').text('重新发送').removeAttr('disabled');
                        val = true
                    }
                }, 'json')


            }
        })
    })
</script>
</html>